<template>
  <div class="risk-assessment-details-container">
    <div class="search-filter-area">
      <div class="search-inputs">
        <div class="input-group">
          <label for="line-name">线路名称:</label>
          <input type="text" id="line-name" placeholder="请输入线路名称">
        </div>
        <div class="input-group">
          <label for="risk-level">风险等级:</label>
          <input type="text" id="risk-level" placeholder="请输入风险等级">
        </div>
        <div class="input-group">
          <label for="risk-score">风险评分:</label>
          <input type="text" id="risk-score" placeholder="请输入风险评分">
        </div>
      </div>
      <div class="action-buttons">
        <button class="reset-button">重置</button>
        <button class="search-button">查询</button>
      </div>
    </div>

    <div class="content-tabs">
      <div class="tab-buttons">
        <button class="tab-button" :class="{ active: activeTab === 'table' }"
                @click="activeTab = 'table'">表格展示
        </button>
        <button class="tab-button" :class="{ active: activeTab === 'chart' }"
                @click="activeTab = 'chart'">图表展示
        </button>
      </div>
      <div class="tab-content" style="height: 100%;">
        <div v-if="activeTab === 'chart'" style="height: 100%;">
          <h3>图表展示区域</h3>
          <div class="chart-placeholder" style="height: calc(100% - 40px);"></div>
        </div>
        <div v-if="activeTab === 'table'" style="height: 100%;">
          <div class="table-container" style="height: 100%; overflow: hidden;">
            <h3>表格区域</h3>
            <div class="table-wrapper" style="height: calc(100% - 40px);">
              <el-table :data="currentPageData" border style="height: calc(100% - 50px);"
                        height="calc(100% - 50px)" @sort-change="handleSortChange">
                <el-table-column prop="cableSection" label="电缆段号" width="100" sortable="true"/>
                <el-table-column prop="lineName" label="线路名称" width="100" sortable="true"/>
                <el-table-column label="操作" width="100">
                  <template #default="{ row }">
                    <button @click="showImage(row)">查看图片</button>
                  </template>
                </el-table-column>
                <el-table-column prop="completionRate" label="过完率" width="100" sortable="true"/>
                <el-table-column prop="cableSectionTerminal" label="电缆段起止点" width="180">
                  <template #default="{ row }">
                    <span v-if="row.cableSectionTerminal">{{ row.cableSectionTerminal }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="例行试验检测情况（合格、一般缺陷、严重缺陷）" width="200">
                  <template #default="{ row }">
                    <span v-if="row.routineTest">{{ row.routineTest }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="avgLoadRate" label="年平均负载率（近三年）" width="150" sortable="true"/>
                <el-table-column prop="maxLoadRate" label="最大负载率（近三年）" width="150" sortable="true"/>
                <el-table-column prop="operationYears" label="运行年限" width="100" sortable="true"/>
                <el-table-column prop="threeYearFaults" label="近三年本体故障次数（除外破）" width="150"
                                 sortable="true"/>
                <el-table-column prop="threeYearOtherFaults" label="近三年接入故障次数（除外破）" width="150"
                                 sortable="true"/>
                <el-table-column prop="cablePath" label="电缆通道名称" width="120" sortable="true"/>
                <el-table-column prop="cableNumber" label="电缆通道所经的电缆并数量" width="150" sortable="true"/>
                <el-table-column prop="pathEnvironment" label="通道环境（优、良、一般、差）" width="150"/>
                <el-table-column prop="avgCableNumber" label="并内电缆平均数量" width="120" sortable="true"/>
                <el-table-column prop="avgLoadVolume" label="低压线通道平均数量" width="120" sortable="true"/>
                <el-table-column prop="cableType" label="电缆头制作类型" width="120"/>
                <el-table-column label="制作人员的历史故障率" width="140">
                  <template #default="{ row }">
                                        <span v-for="(rate, index) in row.makerFaultRates" :key="index">
                                            {{ `${row.makerFaultRateNames[index]} ${rate}%` }}
                                        </span>
                  </template>
                </el-table-column>
                <el-table-column label="交联试验检测情况（优、良、合格、XX缺陷）">
                  <template #default="{ row }">
                    <div v-for="(testStatus, index) in row.crossTestStatus" :key="index">
                      {{ testStatus }}
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pagination" style="margin-top: 10px;">
                <el-pagination background layout="prev, pager, next" :total="powerGridData.length"
                               :page-size="pageSize" @current-change="handlePageChange"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, computed} from 'vue';
import {ElTable, ElTableColumn, ElPagination} from 'element-plus';
import 'element-plus/dist/index.css';
import {useGridStore} from "../store/gridData";

const activeTab = ref('table');
// const powerGridData = ref([
//     {
//         cableSection: '1',
//         lineName: '10kV果园线',
//         cableSectionTerminal: '黄金站开关309至东高#1开关301',
//         routineTest: '严重缺陷',
//         avgLoadRate: '36.87%',
//         maxLoadRate: '76.37%',
//         operationYears: '5',
//         threeYearFaults: '0',
//         threeYearOtherFaults: '0',
//         cablePath: '黄金路电缆通道',
//         cableNumber: '30',
//         pathEnvironment: '良好',
//         avgCableNumber: '6',
//         avgLoadVolume: '0',
//         cableType: '终端头1',
//         makerFaultRates: [6],
//         makerFaultRateNames: ['终端头1'],
//         crossTestStatus: ['合格']
//     },
//     {
//         cableSection: '2',
//         lineName: '10kV红氢线',
//         cableSectionTerminal: '联诚国际开关站307至020杆',
//         routineTest: '一般缺陷',
//         avgLoadRate: '27.18%',
//         maxLoadRate: '108.28%',
//         operationYears: '18',
//         threeYearFaults: '0',
//         threeYearOtherFaults: '0',
//         cablePath: '文源中路电缆通道',
//         cableNumber: '11',
//         pathEnvironment: '一般',
//         avgCableNumber: '5',
//         avgLoadVolume: '0',
//         cableType: '终端头1',
//         makerFaultRates: [3, 5],
//         makerFaultRateNames: ['终端头1', '终端头2'],
//         crossTestStatus: ['合格', '合格']
//     },
//     {
//         cableSection: '3',
//         lineName: '10kV金湖线',
//         cableSectionTerminal: '吉祥村开关站307至301',
//         routineTest: '严重缺陷',
//         avgLoadRate: '35.14%',
//         maxLoadRate: '44.16%',
//         operationYears: '10',
//         threeYearFaults: '1',
//         threeYearOtherFaults: '0',
//         cablePath: '金甲冲路电缆通道',
//         cableNumber: '25',
//         pathEnvironment: '一般',
//         avgCableNumber: '7',
//         avgLoadVolume: '0',
//         cableType: '终端头1',
//         makerFaultRates: [7, 6, 11, 8],
//         makerFaultRateNames: ['终端头1', '中间头1', '中间头2', '终端头2'],
//         crossTestStatus: ['合格', '合格', '合格', '合格']
//     },
//     {
//         cableSection: '4',
//         lineName: '10kV华城线',
//         cableSectionTerminal: '华城路#1开关站303至华城路#2开关站301',
//         routineTest: '严重缺陷',
//         avgLoadRate: '55.65%',
//         maxLoadRate: '74.09%',
//         operationYears: '4',
//         threeYearFaults: '0',
//         threeYearOtherFaults: '0',
//         cablePath: '华城路电缆通道',
//         cableNumber: '10',
//         pathEnvironment: '一般',
//         avgCableNumber: '3',
//         avgLoadVolume: '0',
//         cableType: '终端头1',
//         makerFaultRates: [12, 9, 10],
//         makerFaultRateNames: ['终端头1', '中间头1', '中间头2'],
//         crossTestStatus: ['合格', '合格', '合格']
//     },
//     {
//         cableSection: '5',
//         lineName: '10kV富桥线',
//         cableSectionTerminal: '黄桥#1开关站301至黄桥开关站301',
//         routineTest: '严重缺陷',
//         avgLoadRate: '29.35%',
//         maxLoadRate: '45.61%',
//         operationYears: '7',
//         threeYearFaults: '0',
//         threeYearOtherFaults: '0',
//         cablePath: '黄桥路电缆通道',
//         cableNumber: '18',
//         pathEnvironment: '良好',
//         avgCableNumber: '4',
//         avgLoadVolume: '0',
//         cableType: '终端头1',
//         makerFaultRates: [10, 9, 10, 10],
//         makerFaultRateNames: ['终端头1', '中间头1', '中间头2', '终端头2'],
//         crossTestStatus: ['合格', '合格', '合格', '合格']
//     },
//     {
//         cableSection: '6',
//         lineName: '10kV向东1回',
//         cableSectionTerminal: '东华路开关站301至宝灵变342间隔',
//         routineTest: '严重缺陷',
//         avgLoadRate: '19.70%',
//         maxLoadRate: '98.90%',
//         operationYears: '9',
//         threeYearFaults: '0',
//         threeYearOtherFaults: '0',
//         cablePath: '东华路电缆通道',
//         cableNumber: '35',
//         pathEnvironment: '差',
//         avgCableNumber: '6',
//         avgLoadVolume: '0',
//         cableType: '终端头1',
//         makerFaultRates: [6, 4, 4, 13, 13, 13],
//         makerFaultRateNames: ['终端头1', '中间头1', '中间头2', '中间头3', '中间头4', '终端头2'],
//         crossTestStatus: ['合格', '合格', '合格', '合格', '合格', '合格']
//     },
//     {
//         cableSection: '7',
//         lineName: '10kV横梁线',
//         cableSectionTerminal: '东华路开关站303至正华#5开关站301',
//         routineTest: '严重缺陷',
//         avgLoadRate: '45.16%',
//         maxLoadRate: '66.70%',
//         operationYears: '4',
//         threeYearFaults: '0',
//         threeYearOtherFaults: '0',
//         cablePath: '东华路电缆通道',
//         cableNumber: '22',
//         pathEnvironment: '良好',
//         avgCableNumber: '5',
//         avgLoadVolume: '0',
//         cableType: '终端头1',
//         makerFaultRates: [4, 5, 7, 6],
//         makerFaultRateNames: ['终端头1', '中间头1', '中间头2', '终端头2'],
//         crossTestStatus: ['合格', '合格', '合格', '合格']
//     },
//     {
//         cableSection: '8',
//         lineName: '10kV机线',
//         cableSectionTerminal: '机木#2开关站303至机木#3开关站301',
//         routineTest: '一般缺陷',
//         avgLoadRate: '50.19%',
//         maxLoadRate: '70.71%',
//         operationYears: '4',
//         threeYearFaults: '0',
//         threeYearOtherFaults: '1',
//         cablePath: '机木路电缆通道',
//         cableNumber: '16',
//         pathEnvironment: '良好',
//         avgCableNumber: '4',
//         avgLoadVolume: '0',
//         cableType: '终端头1',
//         makerFaultRates: [6, 5, 5],
//         makerFaultRateNames: ['终端头1', '中间头1', '终端头2'],
//         crossTestStatus: ['合格', '合格', '合格']
//     }
// ]);

const powerGridData = ref(useGridStore().state.gridData)

const pageSize = ref(5);
const currentPage = ref(1);
const currentPageData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return powerGridData.value.slice(start, end);
});

const handlePageChange = (page) => {
  currentPage.value = page;
};

const handleSortChange = ({prop, order}) => {
  if (prop) {
    powerGridData.value.sort((a, b) => {
      const aValue = a[prop];
      const bValue = b[prop];

      // Handle potential string values with '%' or other non-numeric characters
      const cleanA = typeof aValue === 'string' ? parseFloat(aValue.replace(/[^0-9.-]+/g, '')) : aValue;
      const cleanB = typeof bValue === 'string' ? parseFloat(bValue.replace(/[^0-9.-]+/g, '')) : bValue;

      if (order === 'ascending') {
        if (cleanA < cleanB) return -1;
        if (cleanA > cleanB) return 1;
        return 0;
      } else if (order === 'descending') {
        if (cleanA > cleanB) return -1;
        if (cleanA < cleanB) return 1;
        return 0;
      } else {
        // No sorting or default order
        return 0;
      }
    });
    // Reset to first page after sorting
    currentPage.value = 1;
  }
};

const showImage = (row) => {
  console.log('查看图片:', row);
  // 实现查看图片的逻辑
};
</script>

<style scoped>
.risk-assessment-details-container {
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  overflow: hidden;
  overflow-x: auto;
  font-family: Arial, sans-serif;
  /* Removed height: 100vh to allow it to fit within parent container */
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
}

.logo {
  font-size: 18px;
  font-weight: bold;
  color: #00914D;
}

.user-info {
  font-size: 14px;
  color: #666;
}

.logout-button {
  margin-left: 10px;
}

.logout-button button {
  padding: 4px 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.search-filter-area {
  padding: 15px;
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.search-inputs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.action-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}

.search-inputs {
  display: flex;
  gap: 10px;
}

.input-group {
  display: flex;
  align-items: center;
}

.input-group label {
  margin-right: 5px;
  font-size: 14px;
  color: #3134e4;
}

.input-group input {
  padding: 8px 12px;
  border: 1px solid #00914D;
  border-radius: 4px;
  width: 200px;
  box-sizing: border-box;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.action-buttons button {
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
}

.reset-button {
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  background-color: #00914D;
  border: 1px solid #00914D;
  color: #fff;
}

.search-button {
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  background-color: #00914D;
  border: 1px solid #00914D;
  color: #fff;
}

.content-tabs {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-x: auto;
}

.tab-buttons {
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
}

.tab-button {
  padding: 10px 20px;
  border: none;
  background-color: #fff;
  cursor: pointer;
  font-size: 14px;
}

.tab-button.active {
  color: #00914D;
  font-weight: bold;
  border-bottom: 2px solid #00914D;
}

.tab-content {
  flex-grow: 1;
  display: flex;
  overflow-x: auto;
}

.table-container {
  /* 移除border和padding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}

.table-wrapper {
  min-width: 2500px;
}

.el-table {
  min-width: 2500px !important;
  overflow-x: auto !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.el-table__body-wrapper {
  overflow-x: auto !important;
}

.el-table th {
  background-color: #00914D !important;
  /* 确保国网绿背景 */
  color: #333 !important;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 2px 4px rgba(2, 73, 72, 0.1);
  /* Add subtle shadow */
}

.pagination {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.chart-placeholder {
  height: calc(100% - 40px);
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #666;
}
</style>
